<template>
	<view class="content-baisc-layout">
		<u-navbar title-bold title="社群" :is-back="false" :border-bottom="false" :background="{
			background:'url(https://resource.lanbaozixun.com/uploads/images/20240617141440943244509.png) no-repeat',
			backgroundSize:'100% '
		}" title-color="#2F3033">
		</u-navbar>

		<view>
			<swipers :pid="8" height="322rpx" padding="20rpx 20rpx 0" style="position: relative;z-index: 2;"></swipers>

			<view class="association-content-area u-margin-20">
				<image src="https://resource.lanbaozixun.com/uploads/images/202406171125489a13b6366.png" class="bg"
					mode="widthFix"></image>
				<image src="https://resource.lanbaozixun.com/uploads/images/20240617112548013259299.png" class="icon"
					mode="widthFix"></image>

				<view class="association-content">
					<u-tabs-tow style="width: 80%;" :list="tabsLists" :gutter="30" :current="tabsCurrent" @change="tabsChange"></u-tabs-tow>

					<view v-for="(v,k) in associationLists" :key="k"
						@click="goPage('/pages/association/info?id=' + v.id)"
						class="row  u-padding-bottom-20 mb20 association-item bg-white u-padding-20">
						<u-avatar :src="v.image" :size="120" mode="square" style="border-radius: 15rpx;overflow: hidden;"></u-avatar>
						<view class="u-padding-left-20 row flex1" style="width: calc(100% - 200rpx);">
							<view class="u-flex-1 information-area">
								<view class="line1 md" style="font-weight: 600;">{{v.name||''}}</view>
								<view class="line1 xs  mt10 remark">{{v.remark||''}}</view>
								<view class="row mt10 muted">
									<view class="row mr10 u-padding-right-15">
										<u-icon name="https://dtm.lanbaozixun.com/static/mobile/association/number_people.svg" :size="26" class="mr5"></u-icon>
										<text class="xxs">{{v.people_number||0}}</text>
									</view>
									<view class="row ml10 u-padding-left-15" v-if="v.last_join_time">
										<u-icon name="https://dtm.lanbaozixun.com/static/mobile/association/join_time.svg" :size="22" class="mr5"></u-icon>
										<text class="xxs">{{v.last_join_time||''}}</text>
									</view>
								</view>
							</view>
							<u-icon name="arrow-right" :size="30"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="associationLists.length <= 0" text="暂无内容" mode="search"></u-empty>
		<pop-advertising pid="9"></pop-advertising>
		<common-tabbar></common-tabbar>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		toLogin
	} from '@/utils/login'
	import {
		getCatrgory,
		getBuyRecord,
		getGoodsLists
	} from '@/api/store'
	import {
		loadingType
	} from "@/utils/type";
	import {
		loadingFun
	} from "@/utils/tools"
	export default {
		data() {
			return {
				list: [],
				tabsLists: [{
					id: 0
				}],
				tabsCurrent: 0,
				associationLists: [],
				page: 1,
				loadingStatus: loadingType.LOADING,
				loadingShowStatus:true
			}
		},
		async onLoad(options) {
			var _this = this;
			_this.getCatrgoryFun()
			
		},
		onShareTimeline() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: '蓝豹咨讯',
				path: "pages/association/lists?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: '蓝豹咨讯',
				path: "pages/index/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onReachBottom: function() {
			this.getAssociationData();
		},
		methods: {
			async getBuyRecordFun() {
				let {
					data
				} = await getBuyRecord();
				this.list = data;
			},
			async getCatrgoryFun() {
				let {
					data
				} = await getCatrgory({
					pid: 1
				});
				this.tabsLists = data;
				this.getAssociationData()
			},
			tabsChange(index) {
				this.tabsCurrent = index;
				this.page = 1;
				this.associationLists = [];
				this.loadingStatus = loadingType.LOADING;
				this.getAssociationData()
			},
			getAssociationData() {
				let {
					associationLists,
					loadingStatus,
					tabsCurrent,
					tabsLists,
					page
				} = this;
				loadingFun(getGoodsLists, page, associationLists, loadingStatus, {
					category_id: (tabsLists[tabsCurrent].id || 0)
				}).then(res => {
					if (res) {
						this.page = res.page;
						this.loadingShowStatus = false
						this.associationLists = res.dataList
						this.loadingStatus = res.status
					}
				})
			},
			goPage(url) {
				if (!this.isLogin) return toLogin();
				uni.navigateTo({
					url,
					fail(e) {
						console.log(e)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #EDEFF2;
		min-height: 100vh;
		
		.content-baisc-layout{
			position: relative;
			
			
			&::before{
				left: 0;
				right: 0;
				z-index: 1;
				height: 30%;
				content: ' ';
				position: absolute;
				background-image: url(https://resource.lanbaozixun.com/uploads/images/20240617141440943244509.png);
				background-size: 100%;
				background-repeat: no-repeat;
			}
			
			&::after{
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 0;
				content: ' ';
				position: absolute;
				background: linear-gradient(to bottom, rgba(176, 223, 255, 1) 35%,  rgba(237, 239, 242, 1) 40%) no-repeat;
			}
		}

		.association-content-area {
			overflow: hidden;
			position: relative;
			width: calc(100% - 40rpx);

			.bg {
				z-index: 1;
				width: 100%;
				position: absolute;
			}

			.icon {
				right: 0;
				width: 320rpx;
				position: absolute;
			}

			.association-content {
				z-index: 2;
				position: relative;
				
				.association-item{
					border-radius: 20rpx;
				}
				
				.information-area{
					width: calc(100% - 200rpx);
					
					.remark{
						color: #666666;
					}
				}
			}

		}
	}
</style>